<template>
    <div>
        <div class="tab" :ref="todoRef">
            <div class="tabcontent" :class="this.size == 'small' ? 'small' :''" ref="tabcontent">
                <div class="box" v-for="shop in hotArr" @click="$router.push({path: '/home/product_details', query: {type: shop.type, templateId: shop.templateId}})">
                    <img v-lazy="{src: shop.productInfo.mainImage}" alt="">
                    <span>{{shop.productInfo.name}}</span>
                    <span>￥{{shop.minSellPrice || '0.00'}}</span>
                </div>
                <div class="small_box" v-if="pageRoute" @click="$router.push({path:pageRoute})">
                    <span class="view_more_icon"></span>
                    <p>查看更多</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'horizontalSlide',
        data() {
            return {
            };
        },
      mounted(){
        this.$nextTick(() => {
          this.InitTabScroll();
        })
      },
        created () {

        },
        updated(){
            this.InitTabScroll();
        },
        props: ["hotArr","size",'pageRoute','todoRef'],
        methods: {
            InitTabScroll(){
              let length = this.pageRoute ? this.hotArr.length + 1 : this.hotArr.length
                let width= this.size == 'small' ? length * (2.1 + 0.1) - 0.1  : length * (2.1 + 0.1) + 0.5;
                this.$refs.tabcontent.style.width=width+'rem';
                this.$nextTick(()=>{
                    if (!this.scroll) {
                        this.scroll=new BScroll(this.$refs[this.todoRef], {
                            startX:0,
                            click:false,
                            scrollX:true,
                            scrollY:false,
                            eventPassthrough:'vertical',
                            // stopPropagation:true
                        })
                    }else{
                        this.scroll.refresh();
                    }
                });
            }
        }

    }
</script>
<style lang="less" scoped>
    .tab{
        width: 100%;
        overflow: hidden;
    }
    .tabcontent{
        display: flex;
        padding:0 0.3rem;
        &.small{
            padding: 0;
        }
    }
    .arr_box {
        .box {
            display: inline-block;
            width: 2.1rem;
            height: auto;
            margin-right: 0.1rem;
            &:last-of-type {
                margin: 0;
            }
            img {
                display: block;
                width: 2.1rem;
                height: 2.1rem;
            }
            span {
                display: block;
                width: 100%;
                padding-left: .1rem;
                color: #353535;
                font-size: 0.24rem;
                margin: 0.22rem 0 0.08rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                &:last-of-type {
                    margin: 0;
                    color: #FF0000;
                    font-size: 0.22rem;
                    text-align: left;
                }
            }
        }
        .small_box{
            display: flex;
            width: 2.1rem;
            background-color: rgb(255, 255, 255);
            height: 3rem;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            p{
                font-size: .24rem;
                color: #A8A8A8;
                margin-top: .18rem;
            }
        }
    }
</style>